<template>
  <div>
    <div class="bg-white flex">
      <LayoutBreadcrumb class="grow" />
    </div>

    <div class="mt-2 bg-white">
      <a-steps v-model:current="current" type="navigation" size="small">
        <a-step disabled title="设置基本信息" />
        <a-step disabled title="设置位置信息" />
        <a-step disabled title="设置监控信息" />
        <!-- <a-step disabled title="设置健康分析" /> -->
      </a-steps>
    </div>

    <div class="mt-2 bg-white pt-8">
      <this-step0 v-show="current === 0" @next="forward" />

      <this-step1 v-show="current === 1" class="w-full pb-16" @next="forward" @back="back" />
      <this-step2 v-show="current === 2" class="w-full pb-16" @next="forward" @back="back" />
      <this-result v-show="current === 3" class="w-full pb-16" @again="current = 0" />
    </div>
  </div>
</template>
  <script lang="ts">
import { defineComponent } from 'vue';
import { LayoutBreadcrumb } from '../../layouts/default/header/components';
import { ref } from 'vue';
import thisStep0 from './form/step0.vue';
import thisStep1 from './form/step1.vue';
import thisStep2 from './form/step2.vue';
import thisResult from './form/result.vue';
import { defHttp } from '/@/utils/http/axios';

export default defineComponent({
  components: { LayoutBreadcrumb, thisStep0, thisStep1, thisStep2, thisResult },
  setup() {
    let form = {};
    const current = ref(0);
    function forward(data) {
      form = {
        ...form,
        ...data,
      };
      if (current.value === 2) {
        defHttp.post({ url: '/project/add', params: form }).then((res) => {
          current.value++;
        });
      } else {
        current.value++;
      }
      console.log(form);
    }
    function back() {
      current.value--;
    }

    return {
      current,
      forward,
      back,
    };
  },
});
</script>
  